<!--
  模块：供需超市 - 首页
-->
<template>
  <div class="supply-shop">
    <AppMainHeader>
    </AppMainHeader>

    <AppMainContent>
      <el-table v-loading="loading" :data="supplyShopList">
        <el-table-column
          label="序号"
          align="center"
          width="60"
          type="index"
        />
        <el-table-column
          label="供需类型"
          align="center"
          prop="type.desc"
          min-width="10%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="标题"
          align="center"
          prop="title"
          min-width="10%"
        />
        <el-table-column
          label="企业名称"
          align="left"
          prop="companyName"
          min-width="15%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="位置"
          align="left"
          prop="location"
          min-width="8%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="上传时间"
          align="center"
          prop="uploadTime"
          min-width="10%"
        />
        <el-table-column
          label="浏览次数"
          align="center"
          prop="focus"
          min-width="18%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          min-width="15%"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['system:supplyShop:detail']"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </AppMainContent>

    <Pagination
      v-show="total > 0"
      :total="total"
      :current.sync="queryParams.currPage"
      :size.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="530px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="85px"
        :disabled="detailFlag"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"/>
        </el-form-item>

        <el-form-item label="电话" prop="mobile">
          <el-input
            v-model="form.mobile"
            type="number"
            placeholder="请输入电话"
            @keydown.native="channelInputLimit"
          />
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择" filterable>
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类别" prop="category">
          <el-select
            v-model="form.category"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="dict in categoryOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="单位" prop="companyId">
          <el-select
            v-model="form.companyId"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in companyOptions"
              :key="item.companyID"
              :label="item.companyName"
              :value="item.companyID"
            ></el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!detailFlag">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  querySupplyShopOnShelf
} from '@/api/supply-shop/overview'

import QueryForm from './components/query-form'

// 新增/更新 供需超市时，供需超市所在单位id在以下数组中时，必须选择部门
export default {
  name: 'SupplyShop',
  components: {QueryForm},
  data() {
    return {
      // 必须选择部门的单位id
      configCompanyId: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供需超市表格数据
      supplyShopList: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        type: undefined
      },
      detailFlag: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询供需超市列表 */
    getList() {
      this.loading = true
      querySupplyShopOnShelf(this.queryParams).then((response) => {
        this.supplyShopList = response.data
        this.total = response.page.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        name: '',
        type: undefined,
        companyName: ''
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 详情 **/
    async handleDetail(row) {
      this.reset()
      const supplyShopId = row.id

      let supplyShopRes = await getSupplyShop({id: supplyShopId})

      let supplyShop = supplyShopRes.data.supplyShop
      this.form = {
        id: supplyShop.id,
        companyId: supplyShop.sysCompany.name,
        deptId: supplyShop.deptId,
        name: supplyShop.supplyShopName,
        category: supplyShop.category,
        mobile: supplyShop.mobile,
        sex: supplyShop.sex,
        isDisabled: supplyShop.isDisabled,
        roleId: supplyShop.roleId
      }

      this.detailFlag = true
      this.open = true
      this.title = '供需超市详情'
    }
  }
}
</script>
<style>
input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
